<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验室管理 - 实验室辅助管理系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/fontawesome-local.css}">
</head>
<body>
    <div class="management-container">
        <!-- 侧边栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h2><i class="fas fa-flask"></i> 实验室管理</h2>
            </div>
            <ul class="nav-menu">
                <li><a th:href="@{/dashboard}"><i class="fas fa-tachometer-alt"></i> 系统仪表盘</a></li>
                <li><a th:href="@{/college-management}"><i class="fas fa-university"></i> 学院管理</a></li>
                <li><a th:href="@{/term-management}"><i class="fas fa-calendar-alt"></i> 学期管理</a></li>
                <li class="active"><a th:href="@{/laboratory-management}"><i class="fas fa-microscope"></i> 实验室管理</a></li>
                <li><a th:href="@{/user-management}"><i class="fas fa-users"></i> 用户管理</a></li>
                <li><a th:href="@{/assignment-management}"><i class="fas fa-user-cog"></i> 管理员分配</a></li>
            </ul>
        </nav>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <header class="top-bar">
                <div class="top-bar-left">
                    <h1>实验室管理</h1>
                </div>
                <div class="top-bar-right">
                    <div class="user-info">
                        <span th:text="${currentUser.name}">管理员</span>
                        <a th:href="@{/logout}" class="logout-btn">退出</a>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 操作栏 -->
                <div class="action-bar">
                    <button class="btn btn-primary" onclick="showAddLabModal()">
                        <i class="fas fa-plus"></i> 添加实验室
                    </button>
                    <div class="search-box">
                        <input type="text" id="searchInput" placeholder="搜索实验室名称..." onkeyup="filterLabs()">
                        <i class="fas fa-search"></i>
                    </div>
                </div>

                <!-- 实验室列表 -->
                <div class="card">
                    <div class="card-header">
                        <h3>实验室列表</h3>
                        <span class="badge" th:text="${laboratories.size()} + ' 个实验室'">0 个实验室</span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table" id="labTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>实验室名称</th>
                                        <th>所属学院</th>
                                        <th>管理员</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="lab : ${laboratories}">
                                        <td th:text="${lab.id}">1</td>
                                        <td th:text="${lab.name}">计算机基础实验室</td>
                                        <td th:text="${lab.college.name}">计算机科学与技术学院</td>
                                        <td>
                                            <span th:if="${lab.managers != null and !lab.managers.isEmpty()}" 
                                                  th:text="${#strings.listJoin(lab.managers.![name], ', ')}">张老师</span>
                                            <span th:if="${lab.managers == null or lab.managers.isEmpty()}" 
                                                  style="color: #999;">未分配</span>
                                        </td>
                                        <td>
                                            <button class="btn btn-sm btn-info" 
                                                    th:data-id="${lab.id}" th:data-name="${lab.name}" th:data-college-id="${lab.college.id}"
                                                    onclick="editLabFromButton(this)">
                                                <i class="fas fa-edit"></i> 编辑
                                            </button>
                                            <button class="btn btn-sm btn-danger" th:data-id="${lab.id}" onclick="deleteLabFromButton(this)">
                                                <i class="fas fa-trash"></i> 删除
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加实验室模态框 -->
    <div id="addLabModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加实验室</h3>
                <span class="close" onclick="closeModal('addLabModal')">&times;</span>
            </div>
            <div class="modal-body">
                <form id="addLabForm">
                    <div class="form-group">
                        <label for="labName">实验室名称</label>
                        <input type="text" id="labName" name="name" class="form-control" placeholder="请输入实验室名称" required>
                    </div>
                    <div class="form-group">
                        <label for="collegeSelect">所属学院</label>
                        <select id="collegeSelect" name="collegeId" class="form-control" required>
                            <option value="">请选择学院</option>
                            <option th:each="college : ${colleges}" th:value="${college.id}" th:text="${college.name}">学院</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('addLabModal')">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveLab()">保存</button>
            </div>
        </div>
    </div>

    <!-- 编辑实验室模态框 -->
    <div id="editLabModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>编辑实验室</h3>
                <span class="close" onclick="closeModal('editLabModal')">&times;</span>
            </div>
            <div class="modal-body">
                <form id="editLabForm">
                    <input type="hidden" id="editLabId" name="id">
                    <div class="form-group">
                        <label for="editLabName">实验室名称</label>
                        <input type="text" id="editLabName" name="name" class="form-control" placeholder="请输入实验室名称" required>
                    </div>
                    <div class="form-group">
                        <label for="editCollegeSelect">所属学院</label>
                        <select id="editCollegeSelect" name="collegeId" class="form-control" required>
                            <option value="">请选择学院</option>
                            <option th:each="college : ${colleges}" th:value="${college.id}" th:text="${college.name}">学院</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('editLabModal')">取消</button>
                <button type="button" class="btn btn-primary" onclick="updateLab()">保存</button>
            </div>
        </div>
    </div>

    <script th:src="@{/js/app.js}"></script>
    <script>
        // 显示添加实验室模态框
        function showAddLabModal() {
            document.getElementById('addLabModal').style.display = 'block';
            document.getElementById('labName').value = '';
            document.getElementById('collegeSelect').value = '';
        }

        // 编辑实验室
        function editLab(id, name, collegeId) {
            document.getElementById('editLabId').value = id;
            document.getElementById('editLabName').value = name;
            document.getElementById('editCollegeSelect').value = collegeId;
            document.getElementById('editLabModal').style.display = 'block';
        }

        // 从按钮编辑实验室
        function editLabFromButton(button) {
            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');
            const collegeId = button.getAttribute('data-college-id');
            editLab(id, name, collegeId);
        }

        // 保存实验室
        function saveLab() {
            const form = document.getElementById('addLabForm');
            const formData = new FormData(form);
            
            fetch('/api/laboratories', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    closeModal('addLabModal');
                    location.reload();
                } else {
                    alert('添加失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('添加失败');
            });
        }

        // 更新实验室
        function updateLab() {
            const form = document.getElementById('editLabForm');
            const formData = new FormData(form);
            const id = document.getElementById('editLabId').value;
            
            fetch('/api/laboratories/' + id, {
                method: 'PUT',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    closeModal('editLabModal');
                    location.reload();
                } else {
                    alert('更新失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('更新失败');
            });
        }

        // 删除实验室
        function deleteLab(id) {
            if (confirm('确定要删除这个实验室吗？删除后将无法恢复！')) {
                fetch('/api/laboratories/' + id, {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        alert('删除失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('删除失败');
                });
            }
        }

        // 从按钮删除实验室
        function deleteLabFromButton(button) {
            const id = button.getAttribute('data-id');
            deleteLab(id);
        }

        // 搜索过滤
        function filterLabs() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const table = document.getElementById('labTable');
            const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
            
            for (let i = 0; i < rows.length; i++) {
                const labName = rows[i].getElementsByTagName('td')[1].textContent.toLowerCase();
                const collegeName = rows[i].getElementsByTagName('td')[2].textContent.toLowerCase();
                if (labName.includes(searchTerm) || collegeName.includes(searchTerm)) {
                    rows[i].style.display = '';
                } else {
                    rows[i].style.display = 'none';
                }
            }
        }

        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modals = document.getElementsByClassName('modal');
            for (let i = 0; i < modals.length; i++) {
                if (event.target == modals[i]) {
                    modals[i].style.display = 'none';
                }
            }
        }
    </script>
</body>
</html> 